<template>
  <div>
    <el-dialog title="选择学员" :visible.sync="dialogVisible" :close-on-click-modal="false" width="90%">
      <div class="wrapper-container">
        <div class='left'>
          <div class="resetSelect" >
            <span class="labelName">视图：</span>
            <el-select v-model="viewType" @change="changeView">
                <el-option v-for="item in viewsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="tree">
            <el-tree ref="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" :indent="0" lazy :load="loadNode" node-key="value"></el-tree>
            <div class="hr"></div>
          </div>
        </div>
        <div class="right">
          <div class="search-container">
            <div class="search-container-item right87">
              <div class="item-name">学员姓名：</div>
              <el-input v-model="searchForm.studentName" style="width: 110px" size="mini"></el-input>
            </div>
            <div class="search-button color-primary width70" @click="searchStudent">
              <img src="../assets/assessment/icon-search.png" alt="" />
              <span>查询</span>
            </div>
          </div>
          <div class="table-container table-css">
            <el-table :data="tableData" border style="width: 1489px" 
              :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" 
             @selection-change="handleSelectionChange"
            class="table-data" :default-sort = "{prop: 'system', order: 'descending'}">
              <el-table-column type="selection" width="55"  align="center"> </el-table-column>
              <el-table-column prop="studentCode" label="学号" sortable align="center"></el-table-column>
              <el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
              <el-table-column prop="gender" label="性别" align="center"></el-table-column>
              <el-table-column prop="birthday" label="出生时间" align="center"></el-table-column>
              <el-table-column prop="grade" label="年级" align="center" ></el-table-column>
              <el-table-column prop="specialty" label="专业" align="center" ></el-table-column>
              <el-table-column prop="className" label="专业班次" align="center"></el-table-column>
            </el-table>
          </div>
          <div class="pagination-block">
            <el-pagination v-if="total>50"  @current-change="currentPage" prev-text="上一页" next-text="下一页" :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getFirstLevel,getZY,getZYBC,getStudentList} from "@/api/student";
export default {
  name: "ChoseStudent",
  data(){
    return {
      dialogVisible:false,
      viewsList:[
          {label:'培养层次+专业+年级+专业班次',value:'1'},
          {label:'培养层次+年级+专业+专业班次',value:'2'}
      ],
      viewType:'1',
      defaultProps: {
        children: 'children',
        label: 'label',
        value:'value',
        isLeaf:'leaf'
      },
      data: [],
      searchForm:{
        auditStatus:'',
        classId:'',
        grade:'',
        studentCode:'',
        studentDui:'',
        studentName:'',
        trainingLevelId:'',
        specialty:'',
        pageNo:1,
      },
      tableData: [],
      total:1,
      lastParams:{
        grade:'',//年级
        specialty:"",//专业编号
        trainingLevelId:'',//培养层次
      },
      node_had:[],
      resolve_had:[],
    }
  },
  methods:{
    searchStudent(){
      this.searchForm.classId = ''
      this.getStudent();
    },
    //当前页
    currentPage(e){
      this.searchForm.pageNo = e;
      this.searchStudent()
    },
    loadNode(node, resolve) {
      if(this.viewType == 1){
        if (node.level === 0) {
          this.node_had = node;
          this.resolve_had = resolve;
          this.initClass(resolve);
          return resolve([])
        }
        if (node.level == 1) {
            this.lastParams.trainingLevelId = node.data.value;
             this.searchForm.trainingLevelId = node.data.value;
            this.getZYinfo(resolve)
            return resolve([])
        };
        if (node.level == 2) {
          this.lastParams.specialty = node.data.value;
          this.searchForm.specialty = node.data.value;
          this.getYear(resolve)
        };
        if (node.level == 3) {
          this.lastParams.grade = node.data.value;
          this.searchForm.grade = node.data.value
          this.getLast(resolve)
          return resolve([])
        };
      }
      if(this.viewType == 2){
        if (node.level === 0) {
          this.initClass(resolve)
        }
        if (node.level == 1) {
          this.lastParams.trainingLevelId = node.data.value;
          this.searchForm.trainingLevelId = node.data.value;
          this.getYear(resolve)
        };
        if (node.level == 2) {
            this.lastParams.grade = node.data.value;
            this.searchForm.grade = node.data.value;
            this.getZYinfo(resolve)
            return resolve([])
        };
        if (node.level == 3) {
            this.lastParams.specialty = node.data.value;
            this.searchForm.specialty = node.data.value;
            this.getLast(resolve)
            return resolve([])
        };
      }
    },
    refreshNode(key) {
        // 获取当前节点，key可以在@node-click和:load绑定函数的回调参数node⽤变量存储后有需要刷新的地⽅取node.key
        let node = this.$refs.tree.getNode(key);
        console.log(node)
        //  设置未进⾏懒加载状态
        node.loaded = false;
        // 重新展开节点就会间接重新触发load达到刷新效果
        node.expand();
    },
    changeView(e){
      this.viewType = e
      this.requestNewData()
    },
    handleSelectionChange(e){
      this.dialogVisible = false
      this.$emit('choseXY',e[0])
    },
    handleNodeClick(data,node){
      if(node.level == 4){
        this.searchForm.classId = data.value
        this.getStudent()
      }else{
         this.refreshNode(data.value)
         this.tableData = []
      }
    },
    requestNewData() {
      this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
      this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
    },
    //获取培养层次
    async initClass(resolve){
      let res = await getFirstLevel({code:'pylevel'});
      if(res.code == 200){
        let data = res.data.map(item=>{
          return {
            label:item.dictValue,
            value:item.id,
            leaf:false
          }
        })
        resolve(data)
      }
    },
    //获取专业信息
    async getZYinfo(resolve){
      let res = await getZY(this.lastParams)
      if(res.code == 200){
        if(res.data.length>0){
          //专业
          let data = res.data.map(item=>{
            return {
              label:item.specialtyName,
              value:item.id,
              leaf:false,
            }
          })
          resolve(data);
        }
      }
    },
    //添加年份
    getYear(resolve){
      let current = new Date().getFullYear();
      let dateData = [];//获取年级
      for(let i=0;i<5;i++){
        dateData.push({
          label:(current - i)+'',
          value:(current - i)+'',
          leaf:false
        })
      }
      resolve(dateData)
    },
    //最后一级
    async getLast(resolve){
      let res = await getZYBC(this.lastParams);
      if(res.code == 200 && res.data.length>0){
        let data = res.data.map(item=>{
          return{
            label:item.className,
            value:item.id,
            leaf:true,
          }
        })
        resolve(data)
      }
    },
    //获取学员列表
    async getStudent(){
      let res = await getStudentList(this.searchForm);
      this.tableData = res.data.records;
    }
  }
};
</script>

<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

 /deep/ .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../styles/commonCss.less";
.search-container {
  justify-content: flex-start!important;
}
.wrapper-container{
  width: 100%;
  box-sizing: border-box;
}
/deep/.search-container-item {
  margin-right: 30px;
}
/deep/.el-table .ascending .sort-caret.ascending{
    border-bottom-color: #004CA7;
}
/deep/.el-table .descending .sort-caret.descending{
     border-top-color: #004CA7;
}
/deep/.el-table .sort-caret.ascending{
    border-bottom-color:rgba(0,76,167,0.5)
}
/deep/.el-table .sort-caret.descending{
    border-top-color:rgba(0,76,167,0.5)
}
.tree{
    position: relative;
    .hr{
        position: absolute;
        width: 1px;
        height: 58px;
        background: #fff;
        left: 27px;
        bottom: -17px;
    }
}

.left{
    width: 355px;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 27px 20px 0 0;
    border-right: 2px solid #004CA7;
    .resetSelect{
        display: flex;
        align-items: center;
        .labelName{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 20px;
            color: #004CA7;
            width: 48px;
        }
        .el-select{
            width: 244px;
            height: 27px;
            line-height: 27px;
            /deep/.el-input__inner{
                height: 27px;
                line-height: 27px;
            }
            /deep/.el-input__icon{
              line-height: 30px;
            }
        }
    }
}
.el-tree{
    margin-top: 20px;
    color: #004CA7;
    /deep/.el-tree-node__label{
        font-size: 16px;
    }
    /deep/.treeitem:first-child{
        font-weight: bold
    } 
    /deep/.el-tree-node__expand-icon{
                color: #004CA7;
            }
    /deep/.el-tree-node.is-current>.el-tree-node__content{
        color: #004CA7;
        background-color:#fff ;
    }
    /deep/.el-tree-node__content{
        height: 36px;
    }
    /deep/.el-tree-node__content:hover {
        background-color: #fff;
    }
    /deep/.el-tree-node{
        position: relative;
        padding-left: 16px;
    }
    /deep/.el-tree-node__children{
        padding-left: 16px;
    }
    //竖线
    /deep/.el-tree-node::before{
        content:'';
        height:100%;
        width:1px;
        position: absolute;
        left: 27px;
        top: 17px;
        // border-width: 1px;
        // border-left:1px dashed rgba(0,76,167,0.39) ;

    }
    //当前最后一个节点的竖线高度固定
    /deep/.el-tree-node:last-child::before{
        height: 36px;
        border: none;
    }
    //横线
    /deep/.el-tree-node::after{
        content:'';
        height:20px;
        width:24px;
        position: absolute;
        left: -3px;
        top: 17px;
        // border-width: 1px;
        // border-top:1px dashed rgba(0,76,167,0.39) ;
    }
    /deep/[role=treeitem]{
        padding-bottom: 26px;
    }
}
.right{
    padding-left: 24px;
    width: calc(100% - 330px);
}
.width70{width: 70px;}
.item-name {
  color: #004ca7;
}
.flex{
  display: flex;
  justify-content: center;
}
.wrapper-container {
  display: flex;
}
/deep/.el-dialog__body{
    padding-top: 0;
}
</style>

